<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/gs.png" alt="">
      </div>
      <h2>近30条报警情况</h2>
    </div>
    <div class="thirty_cont">
      <el-table :data="data" size="mini" stripe style="width: 100%"
        :header-cell-style="{ color: '#17E8FF', fontSize: '0.12rem' }" :cell-style="{ fontSize: '0.12rem' }">
        <el-table-column prop="cont1" :show-overflow-tooltip="true" min-width="150px" label="报警描述">
          <template slot-scope="scope">
            <el-popover placement="bottom" trigger="hover" :content="scope.row.cont1" v-if="scope.row.cont1.length > 15">
              <span slot="reference">{{ scope.row.cont1 }}</span>
            </el-popover>
            <span v-else>{{scope.row.cont1}}</span>
          </template>
        </el-table-column>
        <af-table-column prop="cont2" label="类型">
        </af-table-column>
        <af-table-column prop="cont3" label="报警时间">
        </af-table-column>
        <!-- <af-table-column prop="cont4" label="设备类型">
        </af-table-column>
        <af-table-column prop="cont5" label="设备序列号">
        </af-table-column> -->
        <af-table-column prop="cont6" label="处理结果">
        </af-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      data: [],
      tenantid: 1128,
      tableData: [
        {
          cont1: '漏电保护漏电保护漏电保护护护护护护',
          cont2: '故障',
          cont3: '14:00',
          // cont4: '数据采集器',
          // cont5: 'A98347342842',
          cont6: '未处理'
        },
        {
          cont1: '漏电保护',
          cont2: '故障',
          cont3: '14:00',
          // cont4: '数据采集器',
          // cont5: 'A98347342842',
          cont6: '未处理'
        },
        {
          cont1: '漏电保护',
          cont2: '故障',
          cont3: '14:00',
          // cont4: '数据采集器',
          // cont5: 'A98347342842',
          cont6: '未处理'
        },
        {
          cont1: '漏电保护',
          cont2: '故障',
          cont3: '14:00',
          // cont4: '数据采集器',
          // cont5: 'A98347342842',
          cont6: '未处理'
        },
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await api.getAlarmMonitoring({ tenantid: this.tenantid })
      res.data.forEach(item => {
        item.alarm_start_date = item.alarm_start_date.substring(5, item.alarm_start_date.length)
        if (item.deal_state == 1) {
          item.deal_state = '未处理'
        } else if (item.deal_state == 2) {
          item.deal_state = '已确认'
        } else if (item.deal_state == 3) {
          item.deal_state = '处理中'
        } else if (item.deal_state == 4) {
          item.deal_state = '已处理'
        } else if (item.deal_state == 5) {
          item.deal_state = '已清除'
        } else if (item.deal_state == 6) {
          item.deal_state = '已恢复'
        }
        if (item.alarm_level == 0) {
          item.alarm_level = '0'
        } else if (item.alarm_level == 1) {
          item.alarm_level = '变位信号'
        } else if (item.alarm_level == 2) {
          item.alarm_level = '异常告警'
        } else if (item.alarm_level == 3) {
          item.alarm_level = '保护事件'
        } else if (item.alarm_level == 4) {
          item.alarm_level = '通知状态'
        } else if (item.alarm_level == 5) {
          item.alarm_level = '告警信息'
        }
        // if(item.device_type == 1){
        //   item.device_type = '组串式逆变器'
        // }else if(item.device_type == 2){
        //   item.device_type = '数采'
        // }else if(item.device_type == 8){
        //   item.device_type = '箱变'
        // }else if(item.device_type == 10){
        //   item.device_type = '环境监测仪'
        // }else if(item.device_type == 13){
        //   item.device_type = '通管机'
        // }else if(item.device_type == 16){
        //   item.device_type = '通用设备'
        // }else if(item.device_type == 17){
        //   item.device_type = '关口电表'
        // }else if(item.device_type == 22){
        //   item.device_type = 'PID'
        // }else if(item.device_type == 37){
        //   item.device_type = '品联数采'
        // }else if(item.device_type == 38){
        //   item.device_type = '户用逆变器'
        // }else if(item.device_type == 39){
        //   item.device_type = '储能'
        // }else if(item.device_type == 40){
        //   item.device_type = '并离网控制器'
        // }else if(item.device_type == 45){
        //   item.device_type = 'PLC'
        // }else if(item.device_type == 46){
        //   item.device_type = '优化器'
        // }else if(item.device_type == 47){
        //   item.device_type = '户用电表'
        // }else if(item.device_type == 62){
        //   item.device_type = '通信模块'
        // }else if(item.device_type == 63){
        //   item.device_type = '分布式数采'
        // }else if(item.device_type == 70){
        //   item.device_type = '安全关断盒'
        // }

        this.data.push({
          cont1: item.alarm_content,
          cont2: item.alarm_level,
          cont3: item.alarm_start_date,
          // cont4: item.device_type,
          // cont5: item.device_id,
          cont6: item.deal_state
        })
      })
      this.$nextTick(() => {
        document.querySelectorAll('td').forEach(item => {
          if (item.children[0].innerHTML == '故障') item.children[0].style.color = '#AC2D2D'
          if (item.children[0].innerHTML == '告警') item.children[0].style.color = '#EED55F'
          if (item.children[0].innerHTML == '未处理') item.children[0].style.color = '#AC2D2D'
          if (item.children[0].innerHTML == '已处理') item.children[0].style.color = '#39E0BE'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.modular {
  .thirty_cont {
    width: 100%;
    height: 100%;

    .el-table {
      font-size: .16rem;
      margin-top: 0.5rem;
      padding: 0 0.1rem;
      height: 77%;
      overflow-y: scroll;
    }
  }
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

/* 滑块颜色 */
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: linear-gradient(-30deg,
      rgba(14, 67, 107, 0.4) 0%,
      rgba(85, 136, 238, 0.6) 100%);
}
</style>
